<template>
  <div>
    <div style="font-size:16px;font-weight: 600;"> <el-radio></el-radio>广告位图片配置</div>
    <el-form :inline="true" :model="state.dataForm" @keyup.enter="state.getDataList()" style="margin-top: 10px;">
      <!--新增 -->
      <el-form-item v-if="state.hasPermission('crm:crmexhibition:save')">
        <el-button type="primary" @click="addOrUpdateHandle('new')">{{ $t("add")
          }}</el-button>
      </el-form-item>
      <!-- 修改 -->
      <el-form-item v-if="state.hasPermission('crm:crmexhibition:update')">
        <el-button type="info" @click="addOrUpdateHandle('edit')">{{ $t("修改")
          }}</el-button>
      </el-form-item>
      <!-- 删除 -->
      <el-form-item>
        <el-button type="danger" @click="state.deleteHandle()">{{ $t("deleteBatch") }}</el-button>
      </el-form-item>
      <el-table :header-cell-style="{ 'background': '#eef1f6', 'color': '#1f2d3d', 'border-color': '#dfe6ec' }"
        v-loading="state.dataListLoading" :data="state.dataList" border
        @selection-change="state.dataListSelectionChangeHandle" style="width: 100%;margin-top: 15px">
        <el-table-column type="selection"></el-table-column>
        <el-table-column align="center" prop="id" label="id" show-overflow-tooltip></el-table-column>
        <el-table-column align="center" prop="" label="图片链接" show-overflow-tooltip></el-table-column>
        <el-table-column align="center" prop="" label="创建时间" show-overflow-tooltip></el-table-column>
        <el-table-column align="center" prop="" label="更新时间" show-overflow-tooltip></el-table-column>
        <el-table-column align="center" prop="" label="跳转链接" show-overflow-tooltip></el-table-column>
        <el-table-column align="center" prop="" label="展会" show-overflow-tooltip></el-table-column>
        <el-table-column align="center" prop="" label="排序" show-overflow-tooltip></el-table-column>
      </el-table>
    </el-form>
    <el-pagination :current-page="state.page" :page-sizes="[10, 20, 50, 100]" :page-size="state.limit"
      :total="state.total" layout="total, sizes, prev, pager, next, jumper" @size-change="state.pageSizeChangeHandle"
      @current-change="state.pageCurrentChangeHandle"> </el-pagination>
    <!-- 弹窗, 新增 / 修改 -->
    <add-or-update :key="addKey" ref="addOrUpdateRef" @refreshDataList="refreshDataList"></add-or-update>
  </div>
</template>
<script lang="ts" setup>
import useView from "@/hooks/useView";
import { nextTick, reactive, ref, toRefs, watch } from "vue";
import AddOrUpdate from "./advertising-space-add-or-update.vue";
import { useRouter } from 'vue-router'
import baseService from "@/service/baseService";
import { ElMessage, ElMessageBox } from 'element-plus'
const view = reactive({
  getDataListURL: '',
  getDataListIsPage: true,
  deleteURL: "/crm/crmdatafavorite",
  deleteIsBatch: true,
  dataForm: {
    id: "",
  }
});


const init = () => {
};


const state = reactive({ ...useView(view), ...toRefs(view) });

const addKey = ref(0);
const ida = ref(0);
const addOrUpdateRef = ref();
const addOrUpdateHandle = (operationType: 'new' | 'edit', id?: number) => {
  addKey.value++;
  if (operationType === 'new') {
    // 新增逻辑，这里不需要传递已有的id，直接进行新增相关初始化等操作
    nextTick(() => {
      addOrUpdateRef.value.init();
    });
  } else if (operationType === 'edit') {
    if (state.dataListSelections) {
      if (Object.keys(state.dataListSelections).length === 0) {
        if (id) {
          // 若单独点击编辑按钮且传递了id，直接使用该id进行编辑初始化
          nextTick(() => {
            addOrUpdateRef.value.init(id);
          });
        }
      } else {
        ida.value = state.dataListSelections[0].id;
        nextTick(() => {
          addOrUpdateRef.value.init(Number(ida.value));
        });
      }
    }
  }
};


//刷新数据
const refreshDataList = () => {
  state.refreshDataList();
};

init();
</script>
